<template>
<div class="bi-select bi-field">

    <template v-if="type=='popup'">
        <bi-input-handle v-if="handleType=='input'"   v-dropdown dropdown-body="body" :dropdown-width="optionWidth" 
        :status = "checkStatus"
        :icon = "icon"
        :placeholder = "placeholder"
        :label = "valueLabel"
        :clear = "clear && value!=''"
        :loading = "loading"
        @clear="handleClear"
    >
        </bi-input-handle>

        <bi-button v-if="handleType=='button'" class="dropdown-toggle" type="light"     v-dropdown dropdown-body="body" :dropdown-width="optionWidth"
        :icon = "icon"
        :loading = "loading"
         >{{valueLabel==''?'&nbsp;':valueLabel}}</bi-button>
    </template>
    
    <div :class="optionBoxClass"  ref="body"   >
        <div :class="'bi-select-option-'+this.optionDir" v-if="!loading" >
            <bi-select-option v-for="(item,id) in optionsList" :key="item.value"  :value="item.value" :label="item.label" :icon="item.icon" ></bi-select-option>
            <slot></slot>
        </div>
    </div>
</div>
</template>

<script>
import fieldMixin from '../fieldMixin.js';
import OptionMixin from '../optionMixin.js';
export default{
    mixins:[fieldMixin,OptionMixin],
    provide() {
        return {
            addOption:(id,value,label,updateFun)=>{
                this.list[id]= {
                    value,
                    label:label??value,
                    updateFun
                }
            },
            updateOption:(id,check)=>{
                if (this.multiple){
                    if (check){
                       if (!this.currentOption.includes(id)) this.currentOption.push(id);
                    }else{
                        this.currentOption.splice(this.currentOption.indexOf(id),1);
                    }
                }else{
                    this.currentOption = [];
                    if (check) this.currentOption.push(id);
                }

                this.flash();
            },
            deleteOption:(id)=>{
                delete this.list[id];
            },
            disabled:this.disabled,
            multiple:this.multiple,

        }
    },
    data(){
        return {
           valueLabel:'',
           oldValue:'',
           currentOption:[],
           list:{}
        }
    },
    computed:{
        boxClass(){
            let classList  = [];
        },
        optionBoxClass(){
            let classList  = [];
            classList.push('bi-select-option-box');
            classList.push('bi-select-option-'+this.type);

            if (this.multiple){
                classList.push('bi-select-option-multiple');
            }

            classList.push(this.optionClass);
            return classList;
        }
    },
    watch:{
        modelValue:{
            handler(val){
                //console.log(val);
                this.currentValue();
            }
        },
        loading:{
            handler(val){
                this.valueLabel = '';
                if (val){
                    this.valueLabel = '';
                }else{
                    this.currentValue();
                }
            }
        }
    },
    methods:{
        currentValue(){
            let keys = Object.keys(this.list);
            
            if (keys.length>0){
                this.currentOption = [];
                let values = [];

                if (this.modelValue && this.modelValue.split) values = this.modelValue.split(',');
                else values = [this.modelValue];
                 
                keys.forEach(id => {

                    let item = this.list[id];

                    values.map(v =>{
                        if (item.value==v){
                            this.currentOption.push(id);
                        }
                    })
                });
                
                this.flash();
            }

            
        },
        flash(){

            for(let i in this.list){
                if (this.currentOption.indexOf(i)===-1){
                    this.list[i].updateFun(false);
                }
            }

            let label = [];
            let value = [];

            for(let i in this.currentOption){
                let id = this.currentOption[i];
                label.push(this.list[id].label);
                value.push(this.list[id].value);
                this.list[id].updateFun(true);
            }
            
            this.valueLabel =  label.join(',');

            let newValue =  value.join(',');

            if (this.oldValue!=newValue){
                this.value = newValue;
                this.oldValue = newValue;
            }
            
        },
        handleClear(){
            this.currentOption = [];
            this.flash();
        },
        getLabel(){
            return this.valueLabel;
        }
    },
    updated(){
        
        this.currentValue();
        
    },
    mounted(){
        this.currentValue();
    },
    props:{
        
        type:{
            type:String,
            default:'popup' //popup 弹出选择， tile 平铺
        },
        handleType:{
            type:String,
            default:'input'
        },
        icon:{
            type:String,
            default:''
        },
        loading:{
            type:Boolean,
            default:false
        },
        multiple:{
            type:Boolean,
            default:false
        },
        optionDir:{
            type:String,
            default:'row' //row 行， column 列
        },
        optionClass:{
            type:String,
            default:'default'
        },
        optionWidth:{
            type:String,
            default:'auto'
        },
        clear:{
            type:Boolean,
            default:true
        }
    }
}
</script>


<style>
.bi-select{
    position: relative;
}
.bi-select-option-row{
    display: flex;
    flex-direction:  column;
}
.bi-select-option-column{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

}

.bi-select-option-box{
    --bs-dropdown-zindex: 1000;
  --bs-dropdown-min-width: 10rem;
  --bs-dropdown-padding-x: 0;
  --bs-dropdown-padding-y: 0.5rem;
  --bs-dropdown-spacer: 0.125rem;
  --bs-dropdown-font-size: 1rem;
  --bs-dropdown-color: var(--bs-body-color);
  --bs-dropdown-bg: var(--bs-body-bg);
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-border-radius: 0.375rem;
  --bs-dropdown-border-width: var(--bs-border-width);
  --bs-dropdown-inner-border-radius: calc(0.375rem - var(--bs-border-width));
  --bs-dropdown-divider-bg: var(--bs-border-color-translucent);
  --bs-dropdown-divider-margin-y: 0.5rem;
  --bs-dropdown-box-shadow: 0 0.5rem 1rem rgba(var(--bs-body-color-rgb), 0.15);
  --bs-dropdown-link-color: var(--bs-body-color);
  --bs-dropdown-link-hover-color: var(--bs-body-color);
  --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #0d6efd;
  --bs-dropdown-link-disabled-color: #adb5bd;
  --bs-dropdown-item-padding-x: 1rem;
  --bs-dropdown-item-padding-y: 0.25rem;
  --bs-dropdown-header-color: #6c757d;
  --bs-dropdown-header-padding-x: 1rem;
  --bs-dropdown-header-padding-y: 0.5rem;
}
.bi-select-option{
    display: block;
    width: 100%;
    padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
    clear: both;
    font-weight: 400;
    color: var(--bs-dropdown-link-color);
    text-align: inherit;
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
    cursor: pointer;
}

.bi-select-option-column .bi-select-option{
    flex:0;
}

.bi-select-option:hover{
    color: var(--bs-dropdown-link-hover-color);
    background-color: var(--bs-dropdown-link-hover-bg);
}

.bi-select-option:focus{
    outline: 0;
}

.bi-select-option-box.default .bi-select-option.checked{
    color: #0d6efd;
}

.bi-select-option-popup .bi-select-option-column{
    padding: 10px;
}

</style>